chartType = 
{
	none: 0,
	chitieuquantrac: 1,
	diemvipham_quanhuyen: 2,
	tyletbts_qt: 3,
	tyletbts_thang: 4
};

tickFormatter = function (format, val) { 
	if(val == 0) return 0;
	if(chartObj.yMax <= 5)
	{
		var objValue = String(val);
		objValue = objValue.split('.');
		var num1 = parseInt(objValue[0]);
		if(objValue.length >1)
		{
			var num2 = 0;
			if(chartObj.bDisplayInt) num2 = parseInt(objValue[1].substr(0,1))/10;
			else num2 = parseFloat(objValue[1].substr(0,1))/10;
			num1 = num1 + num2;	
		}
		return num1;	
	}
	else
	{
		if(chartObj.bDisplayInt) return Math.round(val);
		else 
		{
			var objValue = String(val);
			objValue = objValue.split('.');
			var num1 = objValue[0];
			var num2 = objValue[1];
			var num = 0;
			if(num2 != undefined)
			{
				if(num2.length > 1) num2 = num2[0] + num2[1];
				else num2 = num2[0];
				num = num1 + "." + num2;
			}
			else num = num1;
			num = parseFloat(num);
			return num;
		}
	}
};

charts = function(chartMainID, chartID, divPrintChartID) {
	// setting chart
	this.divChartMain = chartMainID; // the div main chart
	this.divChartID = chartID; // the div chua chart
	this.divPrintChartID = divPrintChartID; // the div de in chart
	this.divSettingChart = 'div_Map_ChartSetting'; // the div de lay tham so dau vao cho chart
	this.divSettingParam = 'div_Map_ChartParameters'; // the div de cau hinh cho chart
	this.divTooltipChart = 'chartpseudotooltip'; // the div hien thi tooltip
	this.txtAngle = 'txt_chart_parameters_xangle'; // the input chua gia tri angle
	this.txtBarWidth = 'txt_chart_parameters_barwidth'; // the input chua gia tri do rong cot
	this.fieldsetID = '';
	this.title = '';
	this.animate = true; // hien thi chart co animate ko?
	this.speedAnimate = 2000; // thoi gian thuc hien animate
	this.zoom = false; // zoom chart
	this.cursor = false;
	this.showToolTip = false;
	this.showLabels = true; // hien thi nhan tren column
	this.yMin = 0; // gia tri min cho cot y
	this.yMax = 0; // gia tri max cho cot y
	this.xAngle = 0; // do nghieng truc x
	this.fontXAxis = 'Tahoma';
	this.titleXAxis = '';
	this.jqplot = null; // plot cua tung chart
	// single bar chart
	this.barWidth = 30;
	this.data = null; // mang json
	this.labels = null; // mang json
	this.legends = null; // mang json
	this.showLegend = true;
	this.colors = null; // mangchua colors cho tung column
	this.varyBarColor = false; // false: bar chart 1 mau - true: moi 1 column la 1 mau
	// update category in
	this.updateCategoryQuanHuyen = false; // xac dinh xem co update category tu oracle -> postgis
		
	// data type
	this.dates = []; // chua control kieu date
	this.numbers = []; // chua control kieu so
	this.selects = []; // chua control combobox
	// xac dinh xem chart co du lieu ko
	this.bEmptyData = false;
	// thong so quan trac
	// tham so 1
	this.gioihanduoi1 = 0;
	this.gioihantren1 = 0;
	// tham so 2
	this.gioihanduoi2 = 0;
	this.gioihantren2 = 0;
	// tham so 3
	this.gioihanduoi3 = 0;
	this.gioihantren3 = 0;
	
	this.minGioihanduoi = 0;
	this.maxGioihantren = 0;
	
	// default color chart
	this.defaultColors = [ "#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", 
	                      "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"];
		
	this.drawBarchart_quantrac = function()
	{
		$('#' + this.divSettingChart).hide();
		$("#" + this.divChartID).show();
		$("#" + this.divChartID).css('top', '15px');	    
	    var grid = {
	        gridLineWidth: 1.5,
	        gridLineColor: 'rgb(235,235,235)',
	        drawGridlines: true
	    };

		if(this.jqplot != null) this.jqplot.destroy();
		var sFormat = '%d';
		if(!this.bDisplayInt) sFormat = '%.4P'; //'%.2f';
		
	     this.jqplot = $.jqplot(this.divChartID, [this.data], {
	        // Turns on animatino for all series in this plot.
	        animate: this.animate,
	        // Will animate plot on calls to plot1.replot({resetAxes:true})
	        animateReplot: true,
	        title: 
        	{
	        	text: this.title
                ,fontFamily: this.fontXAxis
                ,fontSize: '19pt'
        	},
	        cursor: {
	            show: this.cursor
	            ,zoom: this.zoom
	            ,looseZoom: true
	            ,showTooltip: this.showToolTip
	        },
	    	seriesColors: this.colors,
	        // The "seriesDefaults" option is an options object that will
	        // be applied to all series in the chart.
            seriesDefaults:{
	            pointLabels: {
	                show: this.showLabels,
	                formatString: sFormat
	            }
            },
	     	series:[{
	             renderer:$.jqplot.BarRenderer,
	             rendererOptions: {
	                animation:
	                {
	                    speed: this.speedAnimate
	                },
	                 barWidth: this.barWidth,
	                // Set varyBarColor to tru to use the custom colors on the bars.
	                varyBarColor: this.varyBarColor
	             }
	         }],
            axesDefaults: {
	            tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
	            tickOptions: {
	              fontSize: '10pt'
	            }
	        },
	         axes: {
	             xaxis: {
	                renderer: $.jqplot.CategoryAxisRenderer
	                ,label: this.titleXAxis
	                ,labelRenderer: $.jqplot.CanvasAxisLabelRenderer
	                ,tickRenderer: $.jqplot.CanvasAxisTickRenderer
	                ,tickOptions: {
	                    angle: this.xAngle
	                    ,fontFamily: this.fontXAxis
	                    ,fontSize: '12pt'
	                    ,marginTop: '20px' 	
	                }
	             },
		         // Pad the y axis just a little so bars can get close to, but
		         // not touch, the grid boundaries.  1.2 is the default padding.
		         yaxis: {
		             pad: 1.05
		             ,min: this.yMin
		             ,max: this.yMax
		             ,tickOptions:
		             {
		                 formatString: sFormat,
		             	formatter: tickFormatter
		             }
		         }
	         },
	         grid:{
	             background: '#f8f8f8'
	          },   
	         canvasOverlay: {
	             show: true,
	             objects: [{
	                     horizontalLine: {
	                     name: 'pebbles',
	                     y: this.gioihanduoi1,
	                     lineWidth: 3,
	                     xOffset: 0,
	                     color: 'blue',
	                     shadow: false
	                 }},
	                 {
	                     horizontalLine: {
	                     name: 'pebbles',
	                     y: this.gioihantren1,
	                     lineWidth: 3,
	                     xOffset: 0,
	                     color: 'blue',
	                     shadow: false
	                 }},
	                 {
	                	 rectangle: {
	                	   name: 'stddev',
	                	   ymin: this.gioihanduoi1,
	                	   ymax: this.gioihantren1,                          
	                	   color: 'rgba(150,150,150,0.3)',
	                	   shadow: false
	                	 }}
	             ]
	         }     
	     });	
		
		/*$.jqplot.config.enablePlugins = true;
        var s1 = [2, 6, 7, 10];
        var ticks = ['a', 'b', 'c', 'd'];
		this.jqplot = $.jqplot(this.divChartID, [s1], {
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
            animate: !$.jqplot.use_excanvas,
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                }
            },
            highlighter: { show: false }
        });*/
		
		this.tooltipClick();
		
		var aExport = $('#a_chart_export_image');
		var imgData = $('#' + this.divChartID).jqplotToImageStr({}); // given the div id of your plot, get the img data
		aExport.attr('href', imgData);	
	};
	
	// single chart
	this.drawBarChart = function() {
		// x angle
		/*var xAngle = $("#" + this.txtAngle).val();
		if(xAngle == undefined) this.xAngle = 0;
		else this.xAngle = parseFloat(xAngle);*/
		
		if(this.jqplot != null) this.jqplot.destroy();
		var sFormat = '%d';
		if(!this.bDisplayInt) sFormat = '%.4P'; //'%.2f';

		this.jqplot = $.jqplot(this.divChartID, [this.data], {
	        // Turns on animatino for all series in this plot.
	        animate: this.animate
	        // Will animate plot on calls to plot1.replot({resetAxes:true})
	        ,animateReplot: true
	        ,title: this.title
	        // Provide a custom seriesColors array to override the default colors.
	        //,seriesColors: this.colors
	        ,cursor: {
	            show: this.cursor
	            ,zoom: this.zoom
	            ,looseZoom: true
	            ,showTooltip: this.showToolTip
	        }
	        // The "seriesDefaults" option is an options object that will
	        // be applied to all series in the chart.
	        ,seriesDefaults: {
	            pointLabels: {
	                show: this.showLabels,
	                formatString: sFormat
	            }
	            ,renderer: $.jqplot.BarRenderer
	            ,rendererOptions:
	            {
	                // speed up the animation a little bit.
	                // This is a number of milliseconds.
	                // Default for a line series is 2500.
	                animation:
	                {
	                    speed: this.speedAnimate
	                }
	                ,barWidth: this.barWidth
	                ,fillToZero: true
	                ,varyBarColor: this.varyBarColor
	            }
	        }
	        ,axesDefaults: {
	            tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
	            tickOptions: {
	              fontSize: '10pt'
	            }
	        }
	        ,axes: {
	            // Use a category axis on the x axis and use our custom ticks.
	            xaxis: {
	                renderer: $.jqplot.CategoryAxisRenderer
	                ,label: this.titleXAxis
	                ,labelRenderer: $.jqplot.CanvasAxisLabelRenderer
	                ,tickRenderer: $.jqplot.CanvasAxisTickRenderer
	                ,tickOptions: {
	                    angle: this.xAngle
	                    ,fontFamily: this.fontXAxis
	                    ,fontSize: '9pt'
	                }
	                //,ticks: ticks
	            },
	            // Pad the y axis just a little so bars can get close to, but
	            // not touch, the grid boundaries.  1.2 is the default padding.
	            yaxis: {
	                pad: 1.05
	                ,min: this.yMin
	                ,max: this.yMax
	                ,tickOptions:
	                {
	                    formatString: sFormat,
	                	formatter: tickFormatter
	                }
	            }
	        }
	        , highlighter: {
	        	
	        }
	    });
		this.tooltipClick();
		
		var aExport = $('#a_chart_export_image');
		var imgData = $('#' + this.divChartID).jqplotToImageStr({}); // given the div id of your plot, get the img data
		aExport.attr('href', imgData);
	};

	// multi chart
	this.drawBarChart_Multi_quantrac = function() {		
		if(this.jqplot != null) this.jqplot.destroy();
		var sFormat = '%d';
		if(!this.bDisplayInt) sFormat = '%.4P'; //'%.2f';

		$('#' + this.divSettingChart).hide();
		$("#" + this.divChartID).show();
		$("#" + this.divChartID).css('top', '15px');
		
		this.jqplot = $.jqplot(this.divChartID, this.data, {
	        // Turns on animatino for all series in this plot.
	        animate: this.animate,
	        // Will animate plot on calls to plot1.replot({resetAxes:true})
	        animateReplot: true,
	        title: 
        	{
	        	text: this.title
                ,fontFamily: this.fontXAxis
                ,fontSize: '19pt'
        	},
	        // Provide a custom seriesColors array to override the default colors.
	        //,seriesColors: this.colors
	        cursor: {
	            show: this.cursor
	            ,zoom: this.zoom
	            ,looseZoom: true
	            ,showTooltip: this.showToolTip
	        },
	        // The "seriesDefaults" option is an options object that will
	        // be applied to all series in the chart.
            seriesDefaults:{
	            pointLabels: {
	                show: this.showLabels,
	                formatString: sFormat
	            },
	            renderer: $.jqplot.BarRenderer,
	            rendererOptions:
	            {
	                // speed up the animation a little bit.
	                // This is a number of milliseconds.
	                // Default for a line series is 2500.
	                animation:
	                {
	                    speed: this.speedAnimate
	                },
	                barWidth: this.barWidth,
	                fillToZero: false,
	                varyBarColor: this.varyBarColor
	            }
            },
            series: [
                     /*{seriesColors: [ "#ff0000"]}, 
                     {seriesColors: ["#00ff00"]}, 
                     {seriesColors: ["#0000ff"]}*/
             ],
            legend: {
                show: this.showLegend,
                //placement: 'outsideGrid',/
                location: 'e',     // compass direction, nw, n, ne, e, se, s, sw, w.
                //xoffset: 100,        // pixel offset of the legend box from the x (or x2) axis.
                //yoffset: 12,        // pixel offset of the legend box from the y (or y2) axis.,
                labels: chartObj.legends,
                rendererOptions:
                {
                	numberRows: 1, 
                	placement: "outside"//"insideGrid"
        		}
            } , 
            axesDefaults: {
	            tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
	            tickOptions: {
	              fontSize: '10pt'
	            }
	        },
            axes: {
                xaxis: {
	                renderer: $.jqplot.CategoryAxisRenderer
	                ,label: this.titleXAxis
	                ,labelRenderer: $.jqplot.CanvasAxisLabelRenderer
	                ,tickRenderer: $.jqplot.CanvasAxisTickRenderer
	                ,tickOptions: {
	                    angle: this.xAngle
	                    ,fontFamily: this.fontXAxis
	                    ,fontSize: '12pt'
	                    ,marginTop: '20px' 	
	                }
	                ,ticks: this.labels
                },
	            // Pad the y axis just a little so bars can get close to, but
	            // not touch, the grid boundaries.  1.2 is the default padding.
	            yaxis: {
	                //pad: 1.05,
	                min: this.yMin,
	                max: this.yMax,
	                tickOptions:
	                {
	                    formatString: sFormat,
	                	formatter: tickFormatter
	                }
	            }
            },
	        grid:{
	            background: '#f8f8f8'
	        },   
	         canvasOverlay: {
	             show: true,
	             objects: [
                       {
	                     horizontalLine: {
	                     name: 'pebbles',
	                     label: {
	                    	 text: "AAAAAAAAAAAAAAA"
	                     },
	                     y: this.gioihanduoi1,
	                     lineWidth: 3,
	                     xOffset: 0,
	                     color: this.defaultColors[0],
	                     shadow: false
	                 }},
	                 {
	                     horizontalLine: {
	                     name: 'pebbles',
	                     label: 
	                     {
	                    	text: "BBBBBBBBBBBBBBBBBB"
	                     },
	                     y: this.gioihantren1,
	                     lineWidth: 3,
	                     xOffset: 0,
	                     color: this.defaultColors[0],
	                     shadow: false
	                 }},
                       {
	                     horizontalLine: {
	                     name: 'pebbles',
	                     y: this.gioihanduoi2,
	                     lineWidth: 3,
	                     xOffset: 0,
	                     color: this.defaultColors[1],
	                     shadow: false
	                 }},
	                 {
	                     horizontalLine: {
	                     name: 'pebbles',
	                     y: this.gioihantren2,
	                     lineWidth: 3,
	                     xOffset: 0,
	                     color: this.defaultColors[1],
	                     shadow: false
	                 }},
                       {
	                     horizontalLine: {
	                     name: 'pebbles',
	                     y: this.gioihanduoi3,
	                     lineWidth: 3,
	                     xOffset: 0,
	                     color: this.defaultColors[2],
	                     shadow: false
	                 }},
	                 {
	                     horizontalLine: {
	                     name: 'pebbles',
	                     y: this.gioihantren3,
	                     lineWidth: 3,
	                     xOffset: 0,
	                     color: this.defaultColors[2],
	                     shadow: false
	                 }},
	                 {
	                	 rectangle: {
	                	   name: 'stddev',
	                	   ymin: this.minGioihanduoi,
	                	   ymax: this.maxGioihantren,                          
	                	   color: 'rgba(150,150,150,0.3)',
	                	   shadow: false
	                	 }}
	             ]
	         },    
            highlighter: { show: false }
        });
		
		this.tooltipClick_Multi();
		
		var aExport = $('#a_chart_export_image');
		var imgData = $('#' + this.divChartID).jqplotToImageStr({}); // given the div id of your plot, get the img data
		aExport.attr('href', imgData);
	};
	
	// multi chart
	this.drawBarChart_Multi = function() {		
		if(this.jqplot != null) this.jqplot.destroy();
		var sFormat = '%d';
		if(!this.bDisplayInt) sFormat = '%.4P'; //'%.2f';

		this.jqplot = $.jqplot(this.divChartID, this.data, {
	        // Turns on animatino for all series in this plot.
	        animate: this.animate,
	        // Will animate plot on calls to plot1.replot({resetAxes:true})
	        animateReplot: true,
	        title: 
        	{
	        	text: this.title
                ,fontFamily: this.fontXAxis
                ,fontSize: '19pt'
        	},
	        // Provide a custom seriesColors array to override the default colors.
	        //,seriesColors: this.colors
	        cursor: {
	            show: this.cursor
	            ,zoom: this.zoom
	            ,looseZoom: true
	            ,showTooltip: this.showToolTip
	        },
	        // The "seriesDefaults" option is an options object that will
	        // be applied to all series in the chart.
            seriesDefaults:{
	            pointLabels: {
	                show: this.showLabels,
	                formatString: sFormat
	            },
	            renderer: $.jqplot.BarRenderer,
	            rendererOptions:
	            {
	                // speed up the animation a little bit.
	                // This is a number of milliseconds.
	                // Default for a line series is 2500.
	                animation:
	                {
	                    speed: this.speedAnimate
	                },
	                barWidth: this.barWidth,
	                fillToZero: false,
	                varyBarColor: this.varyBarColor
	            }
            },
            legend: {
                show: this.showLegend,
                //placement: 'outsideGrid',/
                location: 'e',     // compass direction, nw, n, ne, e, se, s, sw, w.
                //xoffset: 100,        // pixel offset of the legend box from the x (or x2) axis.
                //yoffset: 12,        // pixel offset of the legend box from the y (or y2) axis.,
                labels: chartObj.legends,
                rendererOptions:
                {
                	numberRows: 1, 
                	placement: "outside"//"insideGrid"
        		}
            } , 
            axesDefaults: {
	            tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
	            tickOptions: {
	              fontSize: '10pt'
	            }
	        },
            axes: {
                xaxis: {
	                renderer: $.jqplot.CategoryAxisRenderer
	                ,label: this.titleXAxis
	                ,labelRenderer: $.jqplot.CanvasAxisLabelRenderer
	                ,tickRenderer: $.jqplot.CanvasAxisTickRenderer
	                ,tickOptions: {
	                    angle: this.xAngle
	                    ,fontFamily: this.fontXAxis
	                    ,fontSize: '12pt'
	                    ,marginTop: '20px' 	
	                }
	                ,ticks: this.labels
                },
	            // Pad the y axis just a little so bars can get close to, but
	            // not touch, the grid boundaries.  1.2 is the default padding.
	            yaxis: {
	                //pad: 1.05,
	                min: this.yMin,
	                max: this.yMax,
	                /*tickOptions:
	                {
	                    formatString: sFormat,
	                	formatter: tickFormatter
	                }*/
	            }
            },
            highlighter: { show: false }
        });
		
		this.tooltipClick_Multi();
		
		var aExport = $('#a_chart_export_image');
		var imgData = $('#' + this.divChartID).jqplotToImageStr({}); // given the div id of your plot, get the img data
		aExport.attr('href', imgData);
	};
	
	this.setLegend = function(showLegend) {
		this.showLegend = showLegend;
	};
	
	this.tooltipClick = function() {		
		$('#' + this.divChartID).bind('jqplotDataHighlight',
		        function (ev, seriesIndex, pointIndex, data) {
		            var mouseX = ev.pageX + 15 - $('#' + chartObj.divChartID).position().left; 
		            var mouseY = 0;
		            if($("#main-content").parent().position() != undefined) mouseY = ev.pageY + 5 - $("#main-content").parent().position().top;
		            else mouseY = ev.pageY + 5;
		            mouseY = mouseY - ($('#' + chartObj.divChartID).position().top + $('.main-content').position().top + 30);
		        	var sMSG = '';
		            if(chartObj.jqplot.data[0][pointIndex][1] < chartObj.gioihanduoi1) sMSG = LANGUAGE['chart_msg_duoichuan'];
		            else if(chartObj.jqplot.data[0][pointIndex][1] > chartObj.gioihantren1) sMSG = LANGUAGE['chart_msg_trenchuan'];
		            else sMSG = LANGUAGE['chart_msg_datchuan'];
		            $('#' + chartObj.divTooltipChart).html(
		            		chartObj.jqplot.data[0][pointIndex][0] + ': ' + chartObj.jqplot.data[0][pointIndex][1] + "<br/><hr/>" + sMSG
		            		);
		            var cssObj = {
		                'position': 'absolute',
		                'left': mouseX + 'px',
		                'top': mouseY + 'px',
		                'boder': '1px solid'
		            };
		            $('#' + chartObj.divTooltipChart).css(cssObj);
		        }
		    );

	    $('#' + this.divChartID).bind('jqplotDataUnhighlight',
		        function (ev) {
		            $('#' + chartObj.divTooltipChart).html('');
		        }
		    );
	};
	
	this.tooltipClick_Multi = function() {		
		$('#' + this.divChartID).bind('jqplotDataHighlight',
		        function (ev, seriesIndex, pointIndex, data) {
		            var mouseX = ev.pageX + 15 - $('#' + chartObj.divChartID).position().left; 
		            var mouseY = 0;
		            if($("#main-content").parent().position() != undefined) mouseY = ev.pageY + 5 - $("#main-content").parent().position().top;
		            else mouseY = ev.pageY + 5;
		            mouseY = mouseY - ($('#' + chartObj.divChartID).position().top + $('.main-content').position().top + 30);
		        	var sMSG = '';
		            if(seriesIndex == 0)
	            	{
		            	if(chartObj.jqplot.data[seriesIndex][pointIndex] < chartObj.gioihanduoi1) sMSG = LANGUAGE['chart_msg_duoichuan'];
		            	else if(chartObj.jqplot.data[seriesIndex][pointIndex] > chartObj.gioihantren1) sMSG = LANGUAGE['chart_msg_trenchuan'];
	            	}
		            else if(seriesIndex == 1)
	            	{
		            	if(chartObj.jqplot.data[seriesIndex][pointIndex] < chartObj.gioihanduoi2) sMSG = LANGUAGE['chart_msg_duoichuan'];
		            	else if(chartObj.jqplot.data[seriesIndex][pointIndex] > chartObj.gioihantren2) sMSG = LANGUAGE['chart_msg_trenchuan'];
	            	}
		            else if(seriesIndex == 2)
	            	{
		            	if(chartObj.jqplot.data[seriesIndex][pointIndex] < chartObj.gioihanduoi3) sMSG = LANGUAGE['chart_msg_duoichuan'];
		            	else if(chartObj.jqplot.data[seriesIndex][pointIndex] > chartObj.gioihantren3) sMSG = LANGUAGE['chart_msg_trenchuan'];
	            	}
		            $('#' + chartObj.divTooltipChart).html(
		            		chartObj.legends[seriesIndex] + ': ' + chartObj.jqplot.data[seriesIndex][pointIndex] + "<br/><hr/>" + sMSG
		            		);
		            var cssObj = {
		                'position': 'absolute',
		                'left': mouseX + 'px',
		                'top': mouseY + 'px'
		            };
		            $('#' + chartObj.divTooltipChart).css(cssObj);
		        }
		    );

	    $('#' + this.divChartID).bind('jqplotDataUnhighlight',
		        function (ev) {
		            $('#' + chartObj.divTooltipChart).html('');
		        }
		    );
	};
	
	// data: index 0: value int, index 1: value int, .... index n: description
	this.getDataIntAndDraw_Multi = function(dataObj) {
		this.data = [];
		this.colors = [];
		var i = 0, j = 0;
		var maxY = 0;
		if(dataObj.length == 1) 
		{
			this.data = [['none', 0]];
			bEmptyData = true;
		}
		else
		{
			var datas = [];
			this.labels = [];
			var iLengthData = 0;
			// get labels
			for(i=0;i<dataObj.length-1;i++)				
			{
				var dataItems = dataObj[i].split('-');
				var sDes = dataItems[dataItems.length-1];
				this.labels[this.labels.length] = sDes;
				var k = datas.length;
				datas[k] = [];
				iLengthData = dataItems.length - 1;
				for(j=0;j<iLengthData;j++)
				{
					var value = parseInt(dataItems[j]);
					if(isNaN(value)) value = 0;
					if(maxY < value) maxY = value;
					datas[k][j] = value;
				}
			};
			this.data = [];
			
			// get data
			j = 0;
			while(j < iLengthData)
			{
				this.data[j] = [];
				for(i=0;i<datas.length;i++)
				{
					this.data[j][i] = datas[i][j];
				}
				//this.data[j][i++] = 0;
				//this.data[j][i++] = 0;
				j++;
			}
			//this.labels[this.labels.length] = '';
			
			if(maxY == 0) bEmptyData = true;
			else bEmptyData = false;
		}	
		this.yMin = 0;
		this.yMax = this.calculateMaxY(maxY);	
		this.barWidth = parseInt($("#" + this.txtBarWidth).val()) * 10;	
		this.bDisplayInt = true;
		var aExport = $('#a_chart_export_image');			
		var aPrint = $('#a_chart_export_print');
		if(bEmptyData)
		{			
			if(this.jqplot != null) this.jqplot.destroy();
			aExport.css('opacity', 0.3);
			aExport.attr('href', '#');
			aPrint.css('opacity', 0.3);
			alert(LANGUAGE['chart_empty_data']);
		}
		else
		{
			this.drawBarChart_Multi();
			aExport.css('opacity', 1);
			aPrint.css('opacity', 1);
		}
	};
	
	// data: index 0: value int, index 1: description
	this.getDataIntAndDraw = function(dataObj) {
		this.data = [];
		this.colors = [];
		var i = 0, j = 0;
		var maxY = 0;
		if(dataObj.length == 1) 
		{
			this.data = [['none', 0]];
			bEmptyData = true;
		}
		else
		{
			for(i=0;i<dataObj.length-1;i++)				
			{
				var dataItems = dataObj[i].split('-');
				var value = parseInt(dataItems[0]);
				if(maxY < value) maxY = value;
				this.data[this.data.length] = [dataItems[1], dataItems[0]];
			};
			if(maxY == 0) bEmptyData = true;
			else bEmptyData = false;
		}
		// ['#FF0000', '#00749F', '#73C774', '#C7754C', '#17BDB8'];			
		this.yMin = 0;
		this.yMax = this.calculateMaxY(maxY);	
		this.barWidth = parseInt($("#" + this.txtBarWidth).val()) * 10;	
		this.bDisplayInt = true;
		var aExport = $('#a_chart_export_image');			
		var aPrint = $('#a_chart_export_print');
		if(bEmptyData)
		{			
			if(this.jqplot != null) this.jqplot.destroy();
			aExport.css('opacity', 0.3);
			aExport.attr('href', '#');
			aPrint.css('opacity', 0.3);
			alert(LANGUAGE['chart_empty_data']);
		}
		else
		{
			this.drawBarChart();
			aExport.css('opacity', 1);
			aPrint.css('opacity', 1);
		}
	};
	
	// data: index 0: value float, index 1: description
	this.getDataFloatAndDraw = function(dataObj) {
		this.data = [];
		this.colors = [];
		var i = 0;
		var maxY = 0;
		if(dataObj.length == 1)
		{
			this.data = [['none', 0]];
			bEmptyData = true;
		}
		else
		{
			for(i=0;i<dataObj.length-1;i++)				
			{
				var dataItems = dataObj[i].split('-');
				//dataItems[0] = dataItems[0].substring(0,5);
				var arrData = dataItems[0].split('.');
				var val1 = arrData[0];
				var val2 = "0";
				if(arrData.length > 1) val2 = arrData[1].substr(0,2);
				var val = val1 + '.' + val2;
				val = parseFloat(val);				
				var value = parseFloat(val);
				if(maxY < value) maxY = value;
				this.data[this.data.length] = [dataItems[1], value];
			};
			if(maxY == 0) bEmptyData = true;
			else bEmptyData = false;
		}
		// ['#FF0000', '#00749F', '#73C774', '#C7754C', '#17BDB8'];			
		this.yMin = 0;
		this.yMax = this.calculateMaxY(maxY);	
		this.barWidth = parseInt($("#" + this.txtBarWidth).val()) * 10;	
		this.bDisplayInt = false;
		var aExport = $('#a_chart_export_image');			
		var aPrint = $('#a_chart_export_print');
		if(bEmptyData)
		{			
			if(this.jqplot != null) this.jqplot.destroy();
			aExport.css('opacity', 0.3);
			aExport.attr('href', '#');
			aPrint.css('opacity', 0.3);
			alert(LANGUAGE['chart_empty_data']);
		}
		else
		{
			this.drawBarChart();
			aExport.css('opacity', 1);
			aPrint.css('opacity', 1);
		}
	};
	
	// data: index 0: value float, index 1: description
	this.getDataFloatAndDraw_DQT = function(dataObj) {
		this.data = [];
		this.colors = [];
		var i = 0;
		var maxY = 0;
		if(dataObj.length == 1)
		{
			this.data = [['none', 0]];
			bEmptyData = true;
		}
		else
		{
			for(i=0;i<dataObj.length;i++)				
			{
				var dataItems = dataObj[i].split('-');
				if(dataItems.length < 3) continue;
				//dataItems[0] = dataItems[0].substring(0,5);
				var arrData = dataItems[0].split('.');
				var val1 = arrData[0];
				var val2 = "0";
				if(arrData.length > 1) val2 = arrData[1].substr(0,2);
				var val = val1 + '.' + val2;
				val = parseFloat(val);				
				var value = parseFloat(val);
				if(maxY < value) maxY = value;
				this.data[this.data.length] = [dataItems[1], value];
				this.colors[this.colors.length] = dataItems[2];
			};
			if(maxY == 0) bEmptyData = true;
			else bEmptyData = false;
		}
		this.gioihanduoi1 = parseFloat(dataObj[dataObj.length - 3]);
		this.gioihantren1 = parseFloat(dataObj[dataObj.length - 2]);		
		// ['#FF0000', '#00749F', '#73C774', '#C7754C', '#17BDB8'];			
		this.yMin = 0;
		this.yMax = this.calculateMaxY(maxY);	
		if(this.yMax < this.gioihantren1) this.yMax = this.gioihantren1 + 10;
		this.barWidth = parseInt($("#" + this.txtBarWidth).val()) * 10;	
		this.bDisplayInt = false;
		var aExport = $('#a_chart_export_image');			
		var aPrint = $('#a_chart_export_print');
		if(bEmptyData)
		{			
			if(this.jqplot != null) this.jqplot.destroy();
			aExport.css('opacity', 0.3);
			aExport.attr('href', '#');
			aPrint.css('opacity', 0.3);
			alert(LANGUAGE['chart_empty_data']);
		}
		else
		{
			this.drawBarchart_quantrac();
			aExport.css('opacity', 1);
			aPrint.css('opacity', 1);
		}
	};
	
	// data: index 0: value int, index 1: value int, .... index n: description
	this.getDataFloatAndDraw_Multi = function(dataObj) {
		this.data = [];
		this.colors = [];
		var i = 0, j = 0;
		var maxY = 0;
		if(dataObj.length == 1) 
		{
			this.data = [['none', 0]];
			bEmptyData = true;
		}
		else
		{
			var datas = [];
			this.labels = [];
			var iLengthData = 0;
			// get labels
			for(i=0;i<dataObj.length-1;i++)				
			{
				var dataItems = dataObj[i].split('-');
				var sDes = dataItems[dataItems.length-1];
				this.labels[this.labels.length] = sDes;
				var k = datas.length;
				datas[k] = [];
				iLengthData = dataItems.length - 1;
				for(j=0;j<iLengthData;j++)
				{
					var value = parseFloat(dataItems[j]);
					if(isNaN(value)) value = 0;
					if(maxY < value) maxY = value;
					datas[k][j] = value;
				}
			};
			this.data = [];
			
			// get data
			j = 0;
			while(j < iLengthData)
			{
				this.data[j] = [];
				for(i=0;i<datas.length;i++)
				{
					this.data[j][i] = datas[i][j];
				}
				//this.data[j][i++] = 0;
				//this.data[j][i++] = 0;
				j++;
			}
			//this.labels[this.labels.length] = '';
			
			if(maxY == 0) bEmptyData = true;
			else bEmptyData = false;
		}	
		this.yMin = 0;
		this.yMax = this.calculateMaxY(maxY);	
		this.barWidth = parseInt($("#" + this.txtBarWidth).val()) * 10;		
		this.bDisplayInt = false;
		var aExport = $('#a_chart_export_image');			
		var aPrint = $('#a_chart_export_print');
		if(bEmptyData)
		{			
			if(this.jqplot != null) this.jqplot.destroy();
			aExport.css('opacity', 0.3);
			aExport.attr('href', '#');
			aPrint.css('opacity', 0.3);
			alert(LANGUAGE['chart_empty_data']);
		}
		else
		{
			this.drawBarChart_Multi();
			aExport.css('opacity', 1);
			aPrint.css('opacity', 1);
		}
	};
	
	// data: index 0: value int, index 1: value int, .... index n: description
	this.getDataFloatAndDraw_Multi_DQT = function(dataObj) {
		this.data = [];
		this.colors = [];
		var i = 0, j = 0;
		var maxY = 0;
		if(dataObj.length == 0) 
		{
			this.data = [['none', 0]];
			bEmptyData = true;
		}
		else
		{
			var datas = [];
			this.labels = [];
			var iLengthData = 0;
			// get labels
			for(i=0;i<dataObj.length;i++)				
			{
				var dataItems = dataObj[i].split('-');
				var sDes = dataItems[dataItems.length-1];
				this.labels[this.labels.length] = sDes;
				var k = datas.length;
				datas[k] = [];
				iLengthData = dataItems.length - 1;
				for(j=0;j<iLengthData;j++)
				{
					var value = parseFloat(dataItems[j]);
					if(isNaN(value)) value = 0;
					if(maxY < value) maxY = value;
					datas[k][j] = value;
				}
			};
			this.data = [];
			
			// get data
			j = 0;
			while(j < iLengthData)
			{
				this.data[j] = [];
				for(i=0;i<datas.length;i++)
				{
					this.data[j][i] = datas[i][j];
				}
				//this.data[j][i++] = 0;
				//this.data[j][i++] = 0;
				j++;
			}
			//this.labels[this.labels.length] = '';
			
			if(maxY == 0) bEmptyData = true;
			else bEmptyData = false;
		}	
		this.yMin = 0;
		this.yMax = this.calculateMaxY(maxY);	
		this.barWidth = parseInt($("#" + this.txtBarWidth).val()) * 10;		
		this.yMin = 0;
		this.yMax = this.calculateMaxY(maxY);	
		if(this.yMax < this.maxGioihantren) this.yMax = this.maxGioihantren + 10;
		this.barWidth = parseInt($("#" + this.txtBarWidth).val()) * 10;	
		this.bDisplayInt = false;
		var aExport = $('#a_chart_export_image');			
		var aPrint = $('#a_chart_export_print');
		if(bEmptyData)
		{			
			if(this.jqplot != null) this.jqplot.destroy();
			aExport.css('opacity', 0.3);
			aExport.attr('href', '#');
			aPrint.css('opacity', 0.3);
			alert(LANGUAGE['chart_empty_data']);
		}
		else
		{
			this.drawBarChart_Multi_quantrac();
			aExport.css('opacity', 1);
			aPrint.css('opacity', 1);
		}
	};
	
    // key down textbox
    this.txtKeyDown = function (e) {
        // Allow: backspace, delete, tab, escape, and enter
    	var event = e;
        if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9
		    || event.keyCode == 27 || event.keyCode == 13 ||
        // Allow: Ctrl+A
		    (event.keyCode == 65 && event.ctrlKey === true) ||
        // Allow: home, end, left, right
		    (event.keyCode >= 35 && event.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        // Allow -
        else if (event.keyCode == 189)
    	{
        	var idElement = "";
        	var ua = $.browser;
            if (!ua.mozilla) idElement = event.srcElement.id;
            else idElement = event.target.id;
            var objElement = document.getElementById(idElement);
            var sText = objElement.value;
            if ((sText.indexOf('-') == -1) && (sText.length > 0))
    		{			    
            	sText = "-" + sText;
            	objElement.value = sText;
            	event.preventDefault();
    		}
            else
                event.preventDefault();
    	}
        // Allow: .
        else if (event.keyCode == 190) {
        	var idElement = "";
        	var ua = $.browser;
            if (!ua.mozilla) idElement = event.srcElement.id;
            else idElement = event.target.id;
            var objElement = document.getElementById(idElement);
            var sText = objElement.value;
            var isDecimal = objElement.getAttribute("IsDecimal");
            if ((sText.indexOf('.') == -1) && (isDecimal == 1)
			    && (sText.length > 0))
                return;
            else
                event.preventDefault();
        } 
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57)
			    && (event.keyCode < 96 || event.keyCode > 105)) {
                event.preventDefault();
            }
        }
    };
    
	this.init = function(chartObj) {
		var i = 0;		
        for (i = 0; i < this.numbers.length; i++) {
            var $target = $(this.numbers[i]);
            $target.keydown(function (e) {
            	var targetELement = e;
                chartObj.txtKeyDown(targetELement);
            });
        }
        
		for (i = 0; i < this.dates.length; i++) {
            var $target = $(this.dates[i]);
            $target.datepicker({
                numberOfMonths: 1,
                constrainInput: true,
                dateFormat: 'dd/mm/yy',
                showButtonPanel: false,
                hideIfNoPrevNext: true,
                autoSize: false,
                onSelect: function (date) {
                    var splitDate = date.split('/');
                    var year = parseInt(splitDate[2]);
                    var month = parseInt(splitDate[1]);
                    var day = parseInt(splitDate[0]);
                    if (month < 10) month = "0" + month;
                    if (day < 10) day = "0" + day;
                    var date = year + "-" + month + "-" + day;                    
                },
            	onClose: function( selectedDate ) {
                }
            });
        }
		
		if(this.fieldsetID != '') $('#' + this.fieldsetID + ' select').uniform();
		
		// do rong cot
		if(this.txtBarWidth != '') $("#" + this.txtBarWidth).val(this.barWidth/10);

		// thiet lap properties top cho chart setting
		if(this.divSettingChart != '')
		{
			var topChartSetting = $("#" + this.divSettingChart).position().top + $("#" + this.divSettingChart).height() + 5;
			$("#" + this.divSettingParam).css('top', topChartSetting + 'px');
			
			// thiet lap properties top cho chart display
			var topChartDisplay = topChartSetting + 15;
			$("#" + this.divChartID).css('top', topChartDisplay + 'px');
	
			var heightChart = $('#' + this.divChartMain).height() - 50; //$('#' + this.divSettingChart).height() - 100;
			$('#' + this.divChartID).height(heightChart);
		}
	};
	
	this.calculateMaxY = function(value) {
		var delta = 5;
		var valueObj = value;
		if(valueObj < 100) delta = 5;
		else if(valueObj >= 100 && valueObj < 1000) delta = 50;
		else if(valueObj >= 1000 && valueObj < 10000) delta = 500;
		else if(valueObj >= 10000 && valueObj < 100000) delta = 5000;
		else delta = 50000;
		var valueObj = value;
		var sodu = valueObj % delta;
		valueObj = valueObj + delta - sodu;
		return valueObj;
	};
	
	this.exportImg = function() {
		var imgData = $('#' + this.divChartID).jqplotToImageStr({}); // given the div id of your plot, get the img data
	    var imgElem = $('<img/>').attr('src', imgData); // create an img and add the data to it
	    imgElem.css('marginTop', '10%');
	    imgElem.height(480);
	    imgElem.width(680);
	    $('#div_Map_Chart_Export_Image .show-hide-content').html('');
	    $('#div_Map_Chart_Export_Image .show-hide-content').append(imgElem);
	    $('#div_Map_Chart_Export_Image').fadeIn(300);
	};
	
	this.printChart = function() {
		if(bEmptyData) return;
	    var imgData = $('#' + this.divChartID).jqplotToImageStr({}); // given the div id of your plot, get the img data
	    var imgElem = $('<img/>').attr('src', imgData); // create an img and add the data to it
	    imgElem.css('marginTop', '20%');
	    imgElem.height(600);
	    imgElem.width(800);
	    var centerObj = document.createElement('center');
	    centerObj.appendChild(imgElem[0]);
	    $('#' + this.divPrintChartID).empty();
	    $("#" + this.divPrintChartID).show();
	    document.getElementById(this.divPrintChartID).appendChild(centerObj);
	    $('#' + this.divPrintChartID).hide();
	    var widthWin = $(window).width();
	    var heightWin = $(window).height();
	    var contentChart = $("#" + this.divPrintChartID).html();
	    var myWindow = window.open('','charts','width=' + widthWin + ';height=' + heightWin);
	    //myWindow.document.write('<html><head><title>Print chart</title>');
	    //myWindow.document.write('</head><body >');
	    myWindow.document.write(contentChart); // + "<script type='text/javascript'>window.print();window.close();</script>");
	    //myWindow.moveTo(100, 100);
	    myWindow.print();
	    myWindow.close();
	    //myWindow.document.write('</body></html>');	    		
	    myWindow.focus();		    
	};
	
	this.showSettingChart = function() {
		$('#' + this.divSettingChart).show();
		$("#" + this.divChartID).hide();
	};
	
	this.hideChart = function() {
		$(".thematic_div").hide();
		$("#" + this.divChartMain).hide();
		$("#" + this.divSettingChart).hide();
		$("#" + this.divSettingParam).hide();
		$("#" + this.divChartID).hide();
		$("#map").fadeIn();
		// hien thanh scale va location
		$('#div_Map_divToggle_location').show();
	};
	
	this.showChart = function(type) {
		var heightMap = $("#map").height();
		$("#" + this.divChartMain).height(heightMap);
		$("#map").hide();
		$(".thematic_div").hide();
		$('#div_Map_Search_Attrs').hide();
		// an thanh scale va location
		$('#div_Map_divToggle_location').hide();
		$("#" + this.divChartMain).fadeIn();
		$("#" + this.divSettingChart).fadeIn();
		$("#" + this.divSettingParam).hide();
		//$("#" + this.divSettingParam).fadeIn();
		$("#" + this.divChartID).fadeIn();
		if(this.jqplot != null) this.jqplot.destroy();		
		
		switch (type) {
		case chartType.chitieuquantrac:
			this.chitieuquantrac_init();
			break;
		case chartType.tyletbts_qt:
			this.tyletbts_qt_init();
			break;
		case chartType.tyletbts_thang:
			this.tyletbts_thang_init();
			break;
		default:
			break;
		}
	};
	
	/****** ty le trung binh tham so theo cac diem quan trac **********/
	this.tyletbts_qt_init = function() {
		$.get(sPortletJSP + "charts/tyletrungbinhthamso_qt.jsp",function(data){
			$("#" + chartObj.divSettingChart).html(data);
			chartObj.title = LANGUAGE["chart_title"];
			chartObj.dates = ["#txtChart_ui_tyletbts_qt_fromdate", "#txtChart_ui_tyletbts_qt_todate"
			             ];
			chartObj.numbers = ["#" + chartObj.txtAngle, "#" + chartObj.txtBarWidth
					               ];
			chartObj.fieldsetID = 'form_chart_diemcapphep_quanhuyen_mapleft_menu';
			chartObj.init(chartObj);
		});
	};
	
	this.tyletbts_qt = function(data) {
		var sData = data.replace(/^\s+|\s+$/g, "");
		var arrData = sData.split('&')[0].split('|');
		var arrGioihan = sData.split('&')[1].split('|'); 
		//var namQT = $('#cboChart_ui_tyletbts_thang_namqt').val();
		//var sTitle2 = '(Các tháng trong năm' + namQT + ')';		
		this.title = LANGUAGE['chart_title_tyletrungbinh_quantrac'];
		//this.titleXAxis = sTitle2;
		// gioi han tham so quan trac
		var minGioihanDuoi = 0;
		var maxGioihanTren = 0;
		for(var i=0; i<arrGioihan.length; i++)
		{
			var items = arrGioihan[i].split('-');
			var val1 = parseFloat(items[0]);
			var val2 = parseFloat(items[1]);
			if(i == 0) minGioihanDuoi = val1;
			else if(minGioihanDuoi > val1) minGioihanDuoi = val1;
			if(i == 0) maxGioihanTren = val2;
			else if(maxGioihanTren < val2) maxGioihanTren = val2;
			if(i==0)
			{				
				this.gioihanduoi1 = val1;
				this.gioihantren1 = val2;
			}
			else if(i==1)
			{
				this.gioihanduoi2 = val1;
				this.gioihantren2 = val2;			
			}
			else if(i==2)
			{
				this.gioihanduoi3 = val1;
				this.gioihantren3 = val2;				
			}
		}
		this.minGioihanduoi = minGioihanDuoi;
		this.maxGioihantren = maxGioihanTren;
		// get legend
		var lstAsset_Legend = [];
		var valQT1 = $('#cboChart_ui_tyletbts_qt_thamsoQT1').val().replace("/(\r\n|\n|\r)/gm", "");
		var valQT2 = $('#cboChart_ui_tyletbts_qt_thamsoQT2').val().replace("/(\r\n|\n|\r)/gm", "");
		var valQT3 = $('#cboChart_ui_tyletbts_qt_thamsoQT3').val().replace("/(\r\n|\n|\r)/gm", "");
		var thamsoQT1 = $('#cboChart_ui_tyletbts_qt_thamsoQT1 option:selected').text().replace("/(\r\n|\n|\r)/gm", "");
		var thamsoQT2 = $('#cboChart_ui_tyletbts_qt_thamsoQT2 option:selected').text().replace("/(\r\n|\n|\r)/gm", "");
		var thamsoQT3 = $('#cboChart_ui_tyletbts_qt_thamsoQT3 option:selected').text().replace("/(\r\n|\n|\r)/gm", "");
		if(valQT1 != '') lstAsset_Legend[lstAsset_Legend.length] = thamsoQT1 + '(' + this.gioihanduoi1 + '-' + this.gioihantren1 + ')';
		if(valQT2 != '') lstAsset_Legend[lstAsset_Legend.length] = thamsoQT2 + '(' + this.gioihanduoi2 + '-' + this.gioihantren2 + ')';
		if(valQT3 != '') lstAsset_Legend[lstAsset_Legend.length] = thamsoQT3 + '(' + this.gioihanduoi3 + '-' + this.gioihantren3 + ')';
		this.legends = lstAsset_Legend;		
		// draw chart
		this.varyBarColor = false;
		this.getDataFloatAndDraw_Multi_DQT(arrData);
	};	
	/****************************************************/
	
	/****** ty le trung binh tham so theo thang **********/
	this.tyletbts_thang_init = function() {
		$.get(sPortletJSP + "charts/tyletrungbinhthamso_thang.jsp",function(data){
			$("#" + chartObj.divSettingChart).html(data);
			chartObj.title = LANGUAGE["chart_title"];
			chartObj.dates = ["#txtChart_ui_tyletbts_thang_fromdate", "#txtChart_ui_tyletbts_thang_todate"
			             ];
			chartObj.numbers = ["#" + chartObj.txtAngle, "#" + chartObj.txtBarWidth
					               ];
			chartObj.fieldsetID = 'form_chart_diemcapphep_quanhuyen_mapleft_menu';
			chartObj.init(chartObj);
		});
	};
	
	this.tyletbts_thang = function(data) {
		var sData = data.replace(/^\s+|\s+$/g, "");
		var arrData = sData.split('|');
		var namQT = $('#cboChart_ui_tyletbts_thang_namqt').val();
		var sTitle2 = '(Các tháng trong năm' + namQT + ')';		
		this.title = LANGUAGE['chart_title_tyletrungbinh_thang'];
		this.titleXAxis = sTitle2;
		this.varyBarColor = true;
		this.getDataFloatAndDraw_DQT(arrData);
	};
	
	/****************************************************/
	
	/****** chi tieu quan trac cua nhieu diem quan trac *******/
	this.chitieuquantrac_init = function() {
		$.get(sPortletJSP + "charts/chitieuquantrac.jsp",function(data){
			$("#" + chartObj.divSettingChart).html(data);
			chartObj.title = LANGUAGE["chart_title"];
			chartObj.dates = ["#txtChart_ui_chitieuquantrac_fromdate", "#txtChart_ui_chitieuquantrac_todate"
			             ];
			chartObj.numbers = ["#" + chartObj.txtAngle, "#" + chartObj.txtBarWidth
					               ];
			chartObj.fieldsetID = 'form_chart_diemcapphep_quanhuyen_mapleft_menu';
			chartObj.init(chartObj);
		});
	};
	
	this.chitieuquantrac = function(data) {
		var sData = data.replace(/^\s+|\s+$/g, "");
		var arrData = sData.split('|');
		var sTitle2 = '';
		// date form
		var dateFrom = $("#txtChart_ui_chitieuquantrac_fromdate").datepicker('getDate');
		if(dateFrom != null)
		{
			sTitle2 += " từ ngày " + dateFrom.getDate() + "/" + (dateFrom.getMonth() + 1) + "/" + dateFrom.getFullYear();
		}
		else dateFrom = '';
		// date to
		var dateTo = $("#txtChart_ui_chitieuquantrac_todate").datepicker('getDate');
		if(dateTo != null) 
		{
			sTitle2 += " đến ngày " + dateTo.getDate() + "/" + (dateTo.getMonth() + 1) + "/" + dateTo.getFullYear();
		}
		else dateTo = '';
		this.title = LANGUAGE['chart_title_chitieuquantrac'];
		this.titleXAxis = sTitle2;
		this.varyBarColor = true;
		this.getDataFloatAndDraw_DQT(arrData);
	};
	/***********************************/
};

var chartObj = new charts('div_Map_Chart', 'div_Map_ChartDisplay', 'div_Map_FullPage_PrintChart');